<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>视频服务端</title>
    <meta charset="utf-8">
    <!-- <link rel="stylesheet" href="style.css"> -->


</head>

<body>

<div class="pure-g">
    <input type="text" id="peer-id">
    <button id='conn'>Connect</button>

    <!-- Video area -->
    <div class="pure-u-2-3" id="video-container">
        <video id="my-video" muted="true" autoplay></video>
    </div>

</div>
<script type="text/javascript" th:src="@{/movie/adapter.js}"></script>
<script type="text/javascript" th:src="@{/movie/jquery-1.8.3.min.js}"></script>
<script type="text/javascript" th:src="@{/movie/peer.js}"></script>

<script th:inline="javascript">
    $(function () {
        $("#conn").click(function () {
            peer_id = $('#peer-id').val();
            console.info(peer_id);
            conn = peer.connect(peer_id);
            console.info(conn);
        });
    });

    // PeerJS object
    var peer = new Peer(
        {
            host: "127.0.0.1",
            port: 80,
            path: "/",
            debug: 3,
            config: {
                "iceServers": [{
                    "url": "turn:127.0.0.1",
                    "username": "eztest",
                    "credential": "eztest-pass-1234"
                }]
            }
        }
    );

    peer.on('call', function (mediaConn) {
        console.info('incoming call');
        mediaConn.on('stream', function (stream) {
            $('#my-video').prop('src', URL.createObjectURL(stream));
        });
        mediaConn.answer();
    });

</script>

</body>
</html>
